<!-- Please remove this file from your project -->
<template>
  <div>
    显示：{{ show }} len: {{ count }} time: {{ time }}ms
    <br/>
    <button @click="onToggle">显示/隐藏</button>
    <button @click="onBg('red')">红色</button>
    <button @click="onBg('green')">绿色</button>
    <hr/>
    <div v-if="show" style="width:100%;overflow-y: auto;max-height: 90vh;">
      <span v-for="item in count" :key="item" :id="'box' + item" class="box" :style="{backgroundColor: color}"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Test'
}
</script>
<script setup>
import { ref } from 'vue'
const show = ref(true)
const color = ref('red')
const count = ref(200000)
const time = ref(0)

const onBg = (c) => {
  color.value = c
  const lastDom = document.getElementById('box' + (count.value - 1))
  let timer;
  const t = Date.now()
  timer = setInterval(() => {
    if (lastDom?.style.backgroundColor == c) {
      clearInterval(timer)
      time.value = Date.now() - t
    }
  }, 50);
}

const onToggle = () => {
  show.value = !show.value
  if (!show.value) return ;
  let timer;
  const t = Date.now()
  const key = 'box' + (count.value - 1)
  timer = setInterval(() => {
    if (document.getElementById(key)) {
      clearInterval(timer)
      time.value = Date.now() - t
    }
  }, 50);
}
</script>
<style scoped>
.box {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-bottom: 5px;
  margin-right: 5px;
}
</style>